<template>
  <div class="oldstuff">
    <!--问答-->
    <div class="page-container">
      <div class="container">
        <div class="row">
          <!--左边-->
          <div class="span8 page-content">
            <div>
              <h1>
                二手交易中心<small>{{smallttle}}</small>
              </h1>
            </div>
            <ul class="tabs-nav">
              <li :class="pagelistquery.lable==='' && pagelistquery.tag===''?'active':''" @click="changeLabel('')">
                <a>全部</a>
              </li>
              <li
                v-for="(label,id) in lables"
                :key="id"
                :class="pagelistquery.lable===label?'active':''"
                @click="changeLabel(label)"
              >
                <a>{{label}}</a>
              </li>
              <li v-if="pagelistquery.tag!=''" class="active" @click="changeLabel('')">
                <a>{{pagelistquery.tag}}</a>
              </li>
            </ul>
            <section class="widget">
              <div class="row">
                <div style="margin :1%" class="col-sm-6 col-md-4" v-for="(item,id) in tableData" :key="id">
                  <router-link :to="'/oldstuffcontent/'+item.oldstuff_id">
                    <div class="thumbnail" style="display: inline-block">
                      <img
                        data-src="holder.js/100%x200"
                        alt="100%x200"
                        :src="item.oldstuff_img"
                        data-holder-rendered="true"
                        style="height: 200px; object-fit: cover;width: 100%; display: block;"
                      />
                      <div class="caption">
                        <h3 style="color:red">￥{{item.oldstuff_price}}</h3>
                        <div style="height: 44px;">{{item.oldstuff_name}}</div>
                      </div>
                    </div>
                  </router-link>
                </div>
              </div>
            </section>
            <!--页码-->
            <el-pagination
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="pagelistquery.total"
            ></el-pagination>
          </div>
          <!--右边-->
          <aside class="span4 page-sidebar">
            <carousel/>
            <activity/>
            <news/>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from '../components/carousel'
import activity from '../components/activity'
import news from '../components/news'

export default {
  name: 'oldstuff',
  components: {
    news,
    activity,
    carousel
  },
  data () {
    return {
      smallttle: '',
      lables: [],
      pagelistquery: {
        lable: '',
        tag: '',
        total: 0,
        pagesize: 12,
        page: 1
      },
      tableData: {}
    }
  },
  methods: {
    changeLabel (lable) {
      this.pagelistquery.lable = lable
      this.smallttle = this.pagelistquery.lable
      this.pagelistquery.tag = ''
      this.getOldStuffList()
    },
    handleCurrentChange (val) {
      this.pagelistquery.page = val
      this.getOldStuffList()
    },
    async getOldStuffList () {
      const result = await this.$axios.post('/web/getoldstufflist', this.qs.stringify(this.pagelistquery))
      if (result.data.state.type === 'SUCCESS') {
        this.tableData = result.data.data
        this.pagelistquery.total = result.data.count
      }
    },
    async getLabelList () {
      const result = await this.$axios.post('/admin/lablelist', this.qs.stringify({ lable_name: '二手分类' }))
      if (result.data.state.type === 'SUCCESS') {
        this.lables = JSON.parse(result.data.data[0].lable)
      }
    }
  },
  created () {
    this.getOldStuffList()
    this.getLabelList()
  }
}
</script>

<style>
  .col-sm-6 {
    float: left;
  }

  .oldstuff {
    min-height: 200px;
  }

  .row {
    margin-top: 20px;
  }

  @media (min-width: 768px) {
    .col-sm-6 {
      width: 27.33333%;
    }
  }

  @media (max-width: 768px) {
    .col-sm-6 {
      width: 48%;
    }
  }
</style>
